<template>
  <div class="word-cloud-content">
    <van-tabs animated v-model:active="activeKey" class="sub-tab" swipeable @change="onTabChange">
      <van-tab :title="item.type" :name="item.type" v-for="item in data" :key="item.type">
        <WordCloudItem :data="mapFilterData(item.data)"></WordCloudItem>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import WordCloudItem from "./WordCloudItem.vue"
import { computed, ref, reactive, toRefs, watch, nextTick, onMounted } from 'vue'
import { useEventStore } from '@/store'
import { storeToRefs } from 'pinia'

const eventStore = useEventStore()
const { hotWordType } = storeToRefs(eventStore)

defineOptions({
  name: 'WordCloud'
})

const props = defineProps({
  data: {
    type: Array,
    default: []
  }
})

const emit = defineEmits(["wordTypeChange"])

const activeKey = ref('');
activeKey.value = hotWordType.value?hotWordType.value:activeKey.value
const mapFilterData = (data: any) => {
  return data.map(v => ( v.words))
}

const onTabChange = (val: number) => {
  emit("wordTypeChange",val)
}
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.word-cloud-content{
  background: #fff;
  color: #212121;
  border-radius: 5px;
  box-shadow: 0px 2px 10px 0px #0000000C;
  padding: 15px 13px 10px;
  margin: 9px 10px 0;
  font-size: 14px;
  :deep(.van-tabs){
    &.sub-tab{
      .van-tabs__wrap .van-tab + .van-tab{
        margin-left: 8px;
      }
    }
  }
}
</style>